<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option = {
	tooltip : {
		formatter : "{a} <br/>{c} {b}"
	},
	toolbox:{
		show : false,
		feature : {
			restore: {show: true},
			saveAsImage : {show : true}
		}
	},
	series:[
		{
		name : '平均值',
		type : 'gauge',
		z : 3,
		min : -5,
		max : 45,
		splitNumber : 10,
		radius : '65%',
		axisLine : { // 坐标轴线
				lineStyle : { // 属性lineStyle控制线条样式
					width : 10
					}
		},
		axisTick : { // 坐标轴小标记
			length : 15, // 属性length控制线长
			lineStyle : { // 属性lineStyle控制线条样式
				color : 'auto'
					}
		},
		splitLine : { // 分隔线
				length : 20, // 属性length控制线长
				lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
					color : 'auto'
				}
		},
		axisLabel : {
				backgroundColor : 'auto',
				borderRadius : 2,
				color : '#eee',
				padding : 3,
				textShadowBlur : 2,
				textShadowOffsetX : 1,
				textShadowOffsetY : 1,
				textShadowColor : '#222'
		},
		title : {
				fontWeight : 'bolder',
				fontSize : 16,
		},
		detail : {
				formatter : function(value) {
				value = (value + '').split('.');
				value.length < 2 && (value.push('00'));
					return ('00' + value[0]).slice(-2) + '.'+ (value[1] + '00').slice(0, 2);
				},
				fontWeight : 'bolder',
				borderRadius : 3,
				backgroundColor : '#444',
				borderColor : '#aaa',
				shadowBlur : 5,
				shadowColor : '#333',
				shadowOffsetX : 0,
				shadowOffsetY : 3,
				borderWidth : 2,
				textBorderColor : '#000',
				textBorderWidth : 2,
				textShadowBlur : 2,
				textShadowColor : '#fff',
				textShadowOffsetX : 0,
				textShadowOffsetY : 0,
				fontFamily : 'Arial',
				width : 100,
				color : '#eee',
		},
		data : [ {
			value : 20,
			name : '平均温度（℃）'
				} ]
		}, 
		
		{
		name : '最低值',
		type : 'gauge',
		center : [ '20%', '46%' ], // 默认全局居中
		radius : '50%',
		z : 3,
		min : -5,
		max : 45,
		startAngle : 270,
				endAngle : 45,
				splitNumber : 10,
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 8
					}
				},
				axisTick : { // 坐标轴小标记
					length : 12, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				splitLine : { // 分隔线
					length : 20, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				pointer : {
					width : 5
				},
				title : {
					offsetCenter : [ 0, '-30%' ], // x, y，单位px
				},
				detail : {
					// 其余属性默认使用全局文本样式，详见TEXTSTYLE
					fontWeight : 'bolder'
				},
				data : [ {
					value : 17,
					name : '最低温（℃）'
				} ]
			},
			
			{
				name : '最高温',
				type : 'gauge',
				center : [ '80%', '46%' ], // 默认全局居中
				radius : '50%',
				min : -5,
				max : 45,
				startAngle : 135,
				endAngle : -90,
				splitNumber : 10,
				axisLine : { // 坐标轴线
					lineStyle : { // 属性lineStyle控制线条样式
						width : 8
					}
				},
				axisTick : { // 坐标轴小标记
					length : 12, // 属性length控制线长
					lineStyle : { // 属性lineStyle控制线条样式
						color : 'auto'
					}
				},
				splitLine : { // 分隔线
					length : 20, // 属性length控制线长
					lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
						color : 'auto'
					}
				},
				pointer : {
					width : 5
				},
				detail : {
					fontWeight : 'bolder'
				},
				data : [ {
					value : 30,
					name : '最高温（℃）'
				} ]
			} ]
};
function callChild(ave,min,max){
   	option.series[0].data[0].value = ave;
   	option.series[1].data[0].value = min;
   	option.series[2].data[0].value = max;
   	
   	myChart.setOption(option, true);
};

function getValue(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);  
      return null;  
};
	    
var value = getValue("ave");
if(value) option.series[0].data[0].value = value;
value = getValue("min");
if(value) option.series[1].data[0].value = value;
value = getValue("max");
if(value) option.series[2].data[0].value = value;

if(value){
	myChart.setOption(option, true);
}
</script>
</body>
</html>